<template>
  <div class="open-container">
    <div class="image-content">
      <!-- 由于工具栏是写固定的大小和长度导致画布的最小宽度是960，否则样式有问题 -->
      <image-view
        :canvasWidth="960"
        :canvasHeight="500"
        :titleWidth="'100%'"
        :imgUrl="openImgData.picture"
        @uploadCanvas="uploadCanvas"
        @goUpdateImage="goUpdateImage"
        @goUpdateWords="goUpdateWords"
        ref="father"
      />
    </div>
    <span slot="footer" class="dialog-footer">
      <div class="diff-btn-invalid" @click="onInvalid">
        <img src="@/assets/video/tc_but_bjwx.png" alt="" />
        <span>标记无效</span>
      </div>
      <div class="diff-btn-push" @click="onFinally">
        <img src="@/assets/video/tc_but_ts.png" alt="" />
        <span>推送</span>
      </div>
    </span>
  </div>
</template>

<script>
import ImageView from "./ImageView.vue";
// import { uploadImage } from "@/api/video/onlineApi.js";
export default {
  name: "OpenViewNew",
  comments: {
    ImageView,
  },
  props: {
    dialogVisibleUse: {
      type: Boolean,
      default: false,
    },
    openImgData: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  components: { ImageView },
  data() {
    return {
      queryData: {},
      dialogVisibleCopyForm: false,
      dataForm: {
        content: "后端非让传其实没啥用",
      },
    };
  },
  mounted() {
    // 给接口传递的摄像头id
    this.queryData.cameraId = this.openImgData.id;
  },
  methods: {
    // 在此处调用接口并传参
    onFinally() {
      // 此处一定要拿到最新的绘制图像
      this.$refs.father.updateImg();
      // 此处拿到输入的内容
      this.$refs.father.updateWords();
      this.$emit("update:dialogVisibleUse", false);
      // uploadImage(this.queryData).then((res) => {
      //   if (res.state === 1) {
      //     this.$message.success("上传成功");
      //   } else {
      //     this.$message.error("上传失败");
      //   }
      // });
    },
    // 下载fabric的绘图（文件资源，文件名字）
    uploadCanvas(e, v) {
      this.queryData.base64str = e;
      this.downloadBase64Image(e, v);
    },

    // 标记无效功能
    onInvalid() {
      this.$refs.father.invalidImg();
    },
    // 更新绘图工具中的图片
    goUpdateImage(e) {
      // let base64Data = JSON.stringify(e);
      this.queryData.base64str = e.replace("data:image/png;base64,", "");
      // this.updateAIwarnImage();
    },
    // 更新绘图工具的文字
    goUpdateWords(e) {
      this.queryData.content = e;
    },
    downloadBase64Image(base64Data, imageName) {
      // 创建一个隐藏的<a>标签
      let link = document.createElement("a");
      link.style.display = "none"; // 隐藏标签
      link.href = base64Data; // 设置链接为Base64数据
      link.download = imageName || "image.png"; // 设置下载文件名
      // 将<a>标签添加到DOM中
      document.body.appendChild(link);
      // 触发点击事件以开始下载
      link.click();
      // 清理：从DOM中移除<a>标签
      document.body.removeChild(link);
    },
  },
};
</script>

<style scoped lang="scss">
.open-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  .image-content {
    img {
      width: 100%;
      height: 100%;
    }
  }
  .dialog-footer {
    margin-top: 20px;
    width: 200px;
    display: flex;
    justify-content: space-between;
    .diff-btn-push {
      box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
      border-radius: 4px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #49b72a;
      height: 32px;
      width: 70px;
      span {
        margin-left: 5px;
        color: #ffffff;
      }
    }
    .diff-btn-invalid {
      box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
      border-radius: 4px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #ffad16;
      height: 32px;
      width: 102px;
      span {
        margin-left: 5px;
        color: #ffffff;
      }
    }
  }
}
</style>
